<template>
  <van-popup v-model="show" position="bottom">
    <div class="box">
      <div class="btop">
        <span class="t1">{{ $t("long.baozhengjinmoshi") }}</span>
        <img
          @click="show = false"
          class="close-img"
          src="../../../assets/images/close.png"
          alt=""
        />
      </div>
      <div class="mbox">
        <div class="mtop">
          <div :class="mode == 1 ? 'active mitem' : 'mitem'" @click="mode = 1">
            {{ $t("common.quancang") }}
          </div>
          <div :class="mode != 1 ? 'active mitem' : 'mitem'" @click="mode = 0">
            {{ $t("long.zhucang") }}
          </div>
        </div>
        <p class="hint">{{ $t("long.tip_baozhengmoshi1") }}</p>
        <div class="contract-content">
          <p>{{ $t("long.tip_baozhengmoshi2") }}</p>
          <p style="margin-bottom: 5vw">
            {{ $t("long.tip_baozhengmoshi3") }}
          </p>
          <p>
            {{ $t("long.tip_baozhengmoshi4") }}
          </p>
        </div>
      </div>
      <van-button type="info" class="confirm" @click="handleBtn">{{
        $t("long.queren")
      }}</van-button>
    </div>
  </van-popup>
</template>

<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      mode: 0,
      show: false,
    };
  },
  created() {},
  methods: {
    handleBtn() {
      Toast(this.$t("long.contracttoast4"));
      this.$emit("changeModel", this.mode);
      this.show = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.van-popup {
  background-color: #090A1B;
}
.box {
  padding: 3vw 3vw 6vw;
  .btop {
    width: 100%;
    height: 10vw;
    position: relative;
    line-height: 10vw;
    text-align: center;
    font-size: 4.5vw;
    .close-img {
      width: 7vw;
      position: absolute;
      right: 0vw;
      top: 50%;
      transform: translateY(-50%);
    }
  }
}
.van-cell {
  background-color: #171A2B;
  color: #fff !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
}
::v-deep .van-field__control {
  color: #fff !important;
}
.confirm {
  width: 100%;
  height: 10vw;
  color: #fff;
  background-color: #1989fa;
  border: 1px solid #1989fa;
}
.hint {
  padding: 0 4vw;
  text-align: left;
  margin: 7vw 0 6vw;
}

.contract-content {
  padding: 0 4vw;
  text-align: left;
  color: #8992AE;
  line-height: 6vw;
  margin-bottom: 10vw;
  font-size: 3.4vw;
  p {
    margin-bottom: 2.4vw;
  }
}
.mtop {
  display: flex;
  justify-content: space-between;
  padding: 2vw 3vw;
  align-items: center;
  margin-top: 4vw;
  .mitem {
    box-sizing: border-box;
    flex: 1;
    height: 10vw;
    background-color: #171A2B;
    color: #d6d6d6;
    text-align: center;
    line-height: 10vw;
    border-radius: 4px;
    &:first-child {
      margin-right: 4vw;
    }
  }
}
.active {
  border: 2px solid #0a7aff;
  font-weight: 600;
  background-color: #090A1B !important;
}
</style>